<template>
  <div class="my-container">
    <shop-bar></shop-bar>
    <product-bar></product-bar>
    <el-container class="main-container">
      <el-container class="letf-container">
        <el-main class="letf-container-individual">
          <el-card>
            <!--            个人信息-->
            <el-row :span="24">
              <el-col :span="10">
                <el-avatar src="https://th.bing.com/th/id/OIG.Nxy8n3bgFil6zVNN1v48?pid=ImgGn" :size="100"></el-avatar>
              </el-col>
              <el-col :span="14">
                <h2>{{userDetail.username}}</h2>
                <p> 人虽欲自绝 其何伤于日月乎</p>
                <el-row :span="24">
                  <el-col :span="10"><span style="font-size: 11px">C币：11</span></el-col>
                  <el-col :span="10"><span style="font-size: 11px">粉丝：11</span></el-col>
                </el-row>

              </el-col>
            </el-row>
          </el-card>
        </el-main>
        <el-container class="letf-container-menu">
          <!--菜单-->
          <el-main class="letf-container-menu-main">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                @select="handleSelect">

              <el-menu-item index="settings">
                <i class="el-icon-menu"></i>
                <span slot="title">个人信息</span>
              </el-menu-item>
              <el-menu-item index="1-2">
                <i class="el-icon-menu"></i>
                <span slot="title">修改密码</span>
              </el-menu-item>

              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">钱包信息</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
          </el-main>
        </el-container>
      </el-container>
      <el-container class="center-container">
        <!--核心内容-->
        <el-header class="container-settings-header"><h2>个人信息</h2></el-header>
        <el-divider style="width: 100%"></el-divider>
        <settings :userDetail="userDetail" v-if="center_page==='settings'"></settings>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import settings from './settings.vue';
import userApi from "@/api/user/user_api";
export default {
  components: {
    'settings': settings,
  },
  data() {
    return {
      center_page: 'settings',
      userDetail:{},
    };
  },
  created() {
   this.init();
  },
  methods: {
    handleSelect(select) {
      this.center_page = select
    },
    init: function () {
      this.userDetail = localStorage.getItem("user");

    }
  }
  // ...
};
</script>
<style scoped>
.letf-container {
  width: 30%;
  display: flex;
  flex-direction: column;
}

.center-container {
  width: 68%;
  margin-top: 1.5%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
  height: 50em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.letf-container-individual {
  height: 25em;
}

.letf-container-menu {
  width: 100%;

  height: 100%;
}

.letf-container-menu el-menu {
  width: 100%;
  flex-grow: 1;
}

.letf-container-menu-main {
  height: 100%;
}


</style>